<template>
    <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
    import echarts from 'echarts'

    require('echarts/theme/macarons') // echarts theme
    export default {
    name: "BarChart2",
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '300px'
        }
    },
    data() {
        return {
            chart: null
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart();
        });
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        
        initChart(){
            let _this = this;
            _this.chart = echarts.init(_this.$el, 'macarons');
            let option = {
                // title:{
                //     text: '数据质量',
                //     textStyle: {
                //       color: '#333333',
                //       fontSize: 24,
                //       lineHeight: 28,
                //       fontWeight: 'bolder'
                //     }
                // },
                tooltip: {
                    trigger: 'item',
                    formatter: `{a}<br/>{b}:{c}({d}%)`
                },
                legend: {
                    top: '30%',
                    orient: 'vertical',
                    right: '0%',
                    formatter: function(name) {
                        let data = [{ value: 108, name: '等级一' },
                            { value: 735, name: '等级二' },
                            { value: 580, name: '等级三' },
                            { value: 484, name: '等级四' }];
                        return _this.formatterName(name, data)
                    }
                },
                series: [
                    {
                        name: '数据质量',
                        type: 'pie',
                        center: ['30%', '50%'],
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 15,
                            borderColor: '#fff',
                            borderWidth: 2,
                            color:  function (params) {
                              let colors = [
                                '#BE4432',
                                '#4D3D4E',
                                '#485B55',
                                '#293742'
                              ];
                              return colors[params.dataIndex]
                            }
                        },
                        label: {
                            show: true,
                            // position: 'center'
                            //  formatter: '{b}\n\n{c}',
                             formatter: `{d}%`,
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        data: [
                            { value: 108, name: '等级一' },
                            { value: 735, name: '等级二' },
                            { value: 580, name: '等级三' },
                            { value: 484, name: '等级四' }
                        ]
                    }
                ]
            };
            this.chart.setOption(option)
        },
        formatterName(name, data=[]) {
            let total = 0;
            let value = 0;
            for (let index in data){
                total += data[index].value;
                if (data[index].name === name) {
                    value = data[index].value;
                }
            }
            let proportion = ((value / total) * 100).toFixed(2);
            return `${name}: ${proportion}%`;
        }
    }
};
</script>

<style scoped>

</style>